<template>
	<view class="page">
		<view v-for="(item,index) in list" :key="index" class="item-box" @tap="cut(index)" v-if="show">
			<view class="item-quan" :class="item.isShow?'active':''">
				<uni-icons type="checkmarkempty" color="#fff" size="20" v-if="item.isShow"></uni-icons>
			</view>
			<view class="item-small">
				<view class="item-title">
					<view style="flex: 1;display: flex;">
						<image :src="item.avatar" mode=""></image>
						<view class="">{{item.real_name}}</view>
					</view>
					<view class="item-kao" v-if="item.is_attendance" @tap.stop="goKao(item.id)">查看考勤表<uni-icons type="forward" color="#D8EEFC" size="16"></uni-icons></view>
					<view class="item-kao" style="color:#FF4B4B" v-else >未上传考勤表</view>
				</view>
				<view class="item-msg">
					<view class="" @tap.stop="jie(index)" v-if="info.order_class==2">
						考勤时长：
						<input type="number" style="width: 40rpx;text-align: right;" :focus="!item.isKao" @blur="jieBlur(index)" :disabled="item.isKao" v-model="item.time">
						<text v-if="info.order_class==1">天</text>
						<text v-if="info.order_class==2">{{info.hourly_wage_type==1?'小时':'天'}}</text>
						<uni-icons type="compose" size="20"></uni-icons>
					</view>
					<view class="" v-if="info.order_class==1" @tap.stop="jieFang(index)">
						房间数：
						<input type="number" style="width: 40rpx;text-align: right;" :focus="!item.isFang" @blur="fangBlur(index)" :disabled="item.isFang" v-model="item.room_num">间
						<uni-icons type="compose" size="20"></uni-icons>
					</view>
				</view>
				<view class="item-she" @tap.stop="go">
					补贴金额：<uni-number-box :min="0" v-model="item.subsidy" :max="999" :value="item.subsidy" />
				</view>
			</view>
		</view>
		<view style="line-height: 100rpx;font-size: 26rpx;text-align: center;color: #757575;" v-if="!show">
			暂无人员上传考勤
		</view>
		<view class="btns">
			<view class="" @tap="goback">取消</view>
			<view class="active" @tap="over" v-if="type==1">确认考勤</view>
			<view class="active" @tap="amend" v-else>修改考勤</view>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				list: [],
				order_id: '',
				info:{},
				type: '',
				show: true,
				cleaner_id: ''
			}
		},
		onLoad(options) {
			this.order_id = options.id
			this.type = options.type
			this.cleaner_id = options.cleaner_id
			this.getList()
		},
		methods:{
			cut(i){
				this.list[i].isShow = !this.list[i].isShow
				this.$forceUpdate()
			},
			jie(i){
				this.list[i].isKao = false
				this.$forceUpdate()
			},
			jieBlur(i){
				this.list[i].isKao = true
				this.$forceUpdate()
			},
			jieFang(i){
				this.list[i].isFang = false
				this.$forceUpdate()
			},
			fangBlur(i){
				this.list[i].isFang = true
				this.$forceUpdate()
			},
			go(){
				
			},
			goKao(id){
				uni.navigateTo({
					url: '/pages/tag/kao/kao?id='+id +'&order_id=' + this.order_id +"&order_class=" + this.info.order_class + '&hourly_wage_type=' + this.info.hourly_wage_type
				})
			},
			goback(){
				uni.navigateBack(1)
			},
			getList(){
				const params = {
					order_id: this.order_id,
					cleaner_id: this.cleaner_id
				}
				this.$http.post('/index/Hotelorder/order_signup_list', params).then(res => {
					this.info = res
					if(res.cleaner_info.length==0){
						this.show = false
					}else{
						this.show = true
						for (let i in res.cleaner_info) {
							res.cleaner_info[i].isShow = false
							res.cleaner_info[i].isKao = true
							res.cleaner_info[i].isFang = true
						}
						this.list = res.cleaner_info
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						icon: "none"
					})
				})
			},
			over(){
				let array = []
				let attendance = []
				for (let i in this.list) {
					if(this.list[i].isShow == true){
						array.push(this.list[i])
					}
				}
				if(array.length==0){
					uni.showToast({
						title: '请选择至少一人考勤',
						icon: 'none'
					})
					return
				}
				for (let i in array) {
					attendance.push({cleaner_id:'',subsidy:'',time:'',room_num:''})
				}
				for (let j in array) {
					attendance[j].cleaner_id = array[j].id
					attendance[j].subsidy = array[j].subsidy
					attendance[j].time = array[j].time
					attendance[j].room_num = array[j].room_num
				}
				const params = {
					order_id: this.order_id,
					attendance: attendance
				}
				this.$http.post('/index/Hotelorder/sure_room_type_num', params).then(res => {
					uni.showToast({
						title: '考勤完成'
					})
					setTimeout(function(){
						uni.$emit('newPages',{
						    value: 1
						})
						uni.navigateBack(1)
					},1000)
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						icon: "none"
					})
				})
			},
			amend(){
				let array = []
				let attendance = []
				for (let i in this.list) {
					if(this.list[i].isShow == true){
						array.push(this.list[i])
					}
				}
				if(array.length==0){
					uni.showToast({
						title: '请选择至少一人考勤',
						icon: 'none'
					})
					return
				}
				for (let i in array) {
					attendance.push({cleaner_id:'',subsidy:'',time:'',room_num:''})
				}
				for (let j in array) {
					attendance[j].cleaner_id = array[j].id
					attendance[j].subsidy = array[j].subsidy
					attendance[j].time = array[j].time
					attendance[j].room_num = array[j].room_num
				}
				const params = {
					order_id: this.order_id,
					attendance: attendance
				}
				this.$http.post('/index/Hotelorder/edit_room_type_num', params).then(res => {
					uni.showToast({
						title: '修改完成'
					})
					setTimeout(function(){
						uni.navigateBack(1)
					},1000)
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="less">
	.page{
		background-color: #fff;
		overflow-y: auto;
		height: 100vh;
		padding-bottom: 168rpx;
	}
	.item-box{
		width: 690rpx;
		padding: 20rpx 0;
		margin: 0 auto;
		background-color: #fff;
		display: flex;
		border-bottom: 2rpx solid #C8C8C8;
		.item-quan{
			width: 40rpx;
			height: 40rpx;
			overflow: hidden;
			border-radius: 50%;
			border: 2rpx solid #3D3D3D;
		}
		
		.item-small{
			flex: 1;
			padding-left: 24rpx;
		}
		.item-title{
			font-size: 36rpx;
			color: #202020;
			font-weight: 600;
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			image{
				width: 100rpx;
				height: 100rpx;
				border-radius: 13rpx;
				overflow: hidden;
				margin-right: 26rpx;
				display: inline-block;
			}
		}
		.item-msg{
			display: flex;
			justify-content: space-between;
			font-size: 32rpx;
			color: #3D3D3D;
			margin: 20rpx 0;
			input{
				display: inline-block;
				position: relative;
				top: 10rpx;
			}
		}
		.item-she{
			font-size: 32rpx;
			display: flex;
		}
	}
	.btns{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		height: 168rpx;
		padding: 36rpx 30rpx;
		display: flex;
		z-index: 222;
		justify-content: space-between;
		view{
			width: 316rpx;
			height: 96rpx;
			text-align: center;
			line-height: 96rpx;
			font-size: 36rpx;
			letter-spacing: 6rpx;
			border-radius: 96rpx;
			border: 2rpx solid #9F9F9F;
		}
	}
	.active{
		background: linear-gradient(to right,#8dc9f1,#d8eefc);
		border: none !important;
		color: #fff;
	}
	.item-kao{
		color: #D8EEFC;
		font-weight: normal;
		font-size: 32rpx;
		width: 7em;
		text-align: right;
	}
</style>